<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人订单页面</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <style>
        .row p{
            line-height: 28px;
        }
        .order-price{
            float: left;
            font-size: 16px;
            color: #666666;
            line-height: 190px;
            text-align: center;
        }
        .order-status{
            font-size: 18px;
            color: #333333;
            line-height: 190px;
            text-align: center;
        }
        .ui .button{
            float: right;
        }
    </style>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
    <div class="ui container">
        <h3 class="add_margin_top">我的订单</h3>
        <div class="ui segment" th:each="ticket:${tickets}">
            <div class="ui grid" >
                <div class="four wide column">
                    <img width="150" height="210" th:src="@{${ticket.filmPicture}}">
                </div>
                <div class="six wide column">
                    <div class="row add_margin_top">
                        <h3 th:text="${ticket.filmName}"></h3>
                    </div>
                    <div class="row add_margin_top">
                        <p th:text="|影院：${ticket.cinemaName}|"></p>
                    </div>
                    <div class="row">
                        <p th:text="|场次：${ticket.date} ${ticket.time}|"></p>
                    </div>
                    <div class="row">
                        <p th:text="|数量：${ticket.number}|"></p>
                    </div>
                </div>
                <div class="two wide column">
                    <div class="order-price">
                        总价：¥ <span th:text="${ticket.money}"></span>
                    </div>
                </div>
                <div class="four wide column">
                    <div class="row">
                        <div class="order-status" th:text="${ticket.status}==1?'已完成':'待付款'"></div>
                    </div>
                    <div class="row" th:if="${ticket.status}==1">
                        <a th:href="@{/user/orderDetail/{id}(id=${ticket.id})}">
                            <button class="ui button">查看订单</button>
                        </a>
                    </div>
                    <div class="row" th:if="${ticket.status}==0">
                        <a th:href="@{/user/order/cancel/{id}(id=${ticket.id})}">
                            <button class="ui red button">取消订单</button>
                        </a>
                        <a th:href="@{/user/pay/{id}(id=${ticket.id})}">
                            <button class="ui teal button">前往支付</button>
                        </a>
                    </div>

                </div>
            </div>
        </div>

    </div>
</body>
</html>